<template>
    <div class="msg-wrapper" v-show="isShow">
        <div class="msg-container">
            <div class="msg-title">确认关闭吗?</div>
            <div class="msg-text">
                <p>{{title}}</p>
                <p>{{info}}</p>
            </div>
            <div class="msg-btn">
                <button type="button" @click = "trueFn">确认</button>
                <button type="button" @click.stop ="hide">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            title : {
                type : String,
                default : '你是我唯一想要的了解'
            },
            info : {
                type : String,
                default : '雨下整夜，我的爱溢出就像雨水'
            }
        },
        data() {
            return {

            }
        },
        methods: {
           hide() {
               /// this.isShow = false
                this.$emit('isShow')
           },
           trueFn() {
                this.hide()
           }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable.styl'

.msg-wrapper
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    z-index $index-mask
    .msg-container
        position fixed
        width $mask-w
        height $mask-h
        z-index $index-mask-container
        background #ccc
        top 50%
        left 50%
        margin-top -($mask-h/2)
        margin-left -($mask-w/2)
        border-radius $radius-4
        padding 10px 24px
        .msg-title
            font-size $font-size-large
            height 40px
            line-height 40px
            border-bottom 1px solid #dcdcdc
        .msg-text
            height 180px
            border-bottom 1px solid #dcdcdc
            padding 10px 0
            overflow hidden
            font-size $font-size-medium
        .msg-btn
            font-size $font-size-large
            height 40px
            line-height 40px
            text-align center
            button
                cursor pointer
                background none
                border none
                outline none
                border 1px solid #dcdcdc
                padding 4px 10px
                border-radius $radius-4
                transition 100ms
                &:hover
                    background $color-text
</style>
